<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div id="app">
    <div class="container">
        <div class="row" style="margin-top: 100px;">
            <div class="col-md-10 col-md-offset-1">
                <!-- 在大于 768px 的屏幕上，通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。
                    在小屏幕上，导航链接呈现堆叠样式-->
                <ul class="nav nav-pills nav-justified">
                    <li role="presentation" :class="showActive=='home'?'active':''"><a href="#/home" @click="changeActive('home')">主页</a></li>
                    <li role="presentation" :class="showActive=='user'?'active':''"><a href="#/user" @click="changeActive('user')">用户管理</a></li>
                    <li role="presentation" :class="showActive=='student'?'active':''"><a href="#/student" @click="changeActive('student')">学生管理</a></li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
<!--                显示路由组件内容-->
                <router-view></router-view>
            </div>
        </div>
    </div>

</div>
<template id="home">
    <div>
        <div class="jumbotron" style="margin-top: 100px;">
            <h1>Hello, world!</h1>
            <p>This is a simple hero unit, a simple jumbotron-style component for calling
                extra attention to featured content or information.</p>
            <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
        </div>
    </div>
</template>
<template id="user">
    <div>
        <table class="table table-striped" style="margin-top: 100px;">
            <tr>
                <th>id</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>生日</th>
                <th>操作</th>
            </tr>
            <tr v-for="user in users">
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>{{user.bir}}</td>
                <td><a href="#" class="btn btn-default">修改</a>
                    <a href="#" class="btn btn-danger">删除</a></td>
            </tr>
        </table>
    </div>
</template>
<template id="student">
    <div>
        <table class="table table-striped" style="margin-top: 100px;">
            <tr>
                <th>id</th>
                <th>学生姓名</th>
                <th>年龄</th>
                <th>学历</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>1</td>
                <td>花花</td>
                <td>23</td>
                <td>本科</td>
                <td><a href="#" class="btn btn-default">修改</a>
                    <a href="#" class="btn btn-danger">删除</a></td>
            </tr>
        </table>
    </div>
</template>


<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script src="js/axios.min.js"></script>
<script>
    //1主页组件
    const home={
        template:'#home'
    }
    //2用户管理组件
    const user={
        template:'#user',
        data(){
            return{
                users:[],
            }
        },
        methods: {

        },
        created(){
            let _this = this;
            axios.get("http://localhost:8080/user/findAll").then(function (response) {
                console.log(response.data);
                _this.users=response.data;
            })
        }
    }
    //3学生管理组件
    const student={
        template:'#student'
    }
    //4使用路由
    const router = new VueRouter({
        routes:[
            {path:'/',redirect:'/home'}, //默认页面，重定向到home
            {path:'/home',component:home},
            {path:'/user',component: user},
            {path:'/student',component:student},
        ]
    });
    const app = new Vue({
        el:'#app',
        data:{
            showActive:'home',
        },
        methods:{
            changeActive(value){
                this.showActive = value;
            }
        },
        router:router, //注册路由
    });
</script>
</body>
</html>